<template>
    <!-- 面包屑导航栏 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品评价</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 搜索区域 -->
    <div class="search-container">
      <el-input
        v-model="searchName"
        placeholder="请输入商品名称"
        clearable
        style="flex: 1; margin-right: 10px;"
      ></el-input>
      <el-input
        v-model="searchId"
        placeholder="请输入商品ID"
        clearable
        style="flex: 1; margin-right: 10px;"
      ></el-input>
      <el-select v-model="searchType" placeholder="请选择评价类型" style="flex: 1; margin-right: 10px;">
        <el-option label="全部" value=""></el-option>
        <el-option label="好评" value="good"></el-option>
        <el-option label="中评" value="medium"></el-option>
        <el-option label="差评" value="bad"></el-option>
      </el-select>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button @click="reset">重置</el-button>
    </div>

    <!-- 数据列表 -->
    <div class="table-container">
      <el-table :data="reviews" stripe>
        <el-table-column prop="content" label="评价内容" min-width="200"></el-table-column>
        <el-table-column prop="productName" label="被评商品" min-width="150"></el-table-column>
        <el-table-column prop="type" label="评价类型" min-width="100"></el-table-column>
        <el-table-column prop="userName" label="评价人" min-width="100"></el-table-column>
        <el-table-column prop="orderId" label="订单编号" min-width="100"></el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button type="text" @click="reply(scope.row)">回复</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const searchName = ref('');
    const searchId = ref('');
    const searchType = ref('');
    const reviews = ref([
      {
        content: '这个商品非常好，我很喜欢！',
        productName: '电子产品',
        type: '好评',
        userName: '张三',
        orderId: '123456',
      },
      {
        content: '产品质量一般，有些小问题。',
        productName: '家居用品',
        type: '中评',
        userName: '李四',
        orderId: '789012',
      },
      {
        content: '非常不满意，退货了。',
        productName: '服装',
        type: '差评',
        userName: '王五',
        orderId: '345678',
      },
    ]);

    const search = () => {
      // 调用后端接口进行搜索，并更新reviews数据
    };

    const reset = () => {
      searchName.value = '';
      searchId.value = '';
      searchType.value = '';
      search();
    };

    const reply = (row) => {
      // 调用后端接口回复评价，并更新reviews数据
    };

    return {
      searchName,
      searchId,
      searchType,
      reviews,
      search,
      reset,
      reply,
    };
  },
};
</script>

<style scoped>


.breadcrumb {
  margin-bottom: 20px;
}

.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.table-container {
  margin-top: 20px;
}

.el-input,
.el-select {
  border-radius: 4px;
}

.el-button {
  margin-left: 10px;
}
</style>